<template>
  <div class="contact-item row items-center q-pa-xs">
    <q-avatar>
      <q-img :src="icon" size="44px"></q-img>
    </q-avatar>

    <div class="col col-grow">
      <div class="column">
        <div class="title">{{ title }}</div>
        <div class="content">{{ content }}</div>
      </div>
    </div>
    <q-btn
      dense
      flat
      icon="mdi-open-in-new"
      size="16px"
      text-color="dark"
      @click="openLink"
    />
  </div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
const { shell } = require('electron');
@Component({
  name: 'contact-item',
})
export default class ContactItem extends Vue {
  @Prop({ default: 'Title' }) readonly title!: string;
  @Prop({ default: 'mdi-account' }) readonly icon!: string;
  @Prop({ default: 'User Name' }) readonly content!: string;
  @Prop({ default: 'about:blank' }) readonly link!: string;
  openLink() {
    if (this.link !== '' && this.link) {
      shell.openExternal(this.link);
    }
  }
}
</script>
<style lang="stylus" scoped>
.contact-item {
  background-color: $background;
  border-radius: 2px;
  overflow: hidden;
  height: 52px;

  .title {
    font-size: 10px;
    color: #9EA5AD;
  }

  .content {
    font-size: 12px;
    font-weight: bold;
  }
}
</style>
